import { Button } from "@arco-design/web-vue";
// @ts-ignore
import { resetObj } from "@/views/table/hooks/utils";
import { componentMap } from "@/views/table/fragment/component-map";
import type { Template } from "@/views/table/types";
export function queryRender({
  models,
  onSearch,
  query,
  emit,
}: {
  models: Template[];
  onSearch: () => void;
  query: { [k in string]: any };
  emit: any;
}) {
  // const queryValue = reactive({});
  const search = () => {
    console.log(query);
    onSearch();
  };
  return (
    <div class="items-center whitespace-nowrap mt-2 flex flex-wrap px-4">
      {models.map((it) =>
        it.renderItem?.query
          ? it.renderItem.query({
              state: query,
              key: it.field,
              placeholder: it.placeholder || "",
              props: it.props,
              emit,
            })
          : componentMap[it.type || "input"]({
              state: query,
              key: it.field,
              placeholder: it.placeholder || "",
              props: it.props || {},
              emit,
            }) || null
      )}
      <Button class="mx-2 mt-2" type="outline" onClick={() => search()}>
        搜索
      </Button>
      <Button
        type="outline"
        class="mt-2"
        status="danger"
        onClick={() => {
          resetObj(query);
          console.log(query);
        }}
      >
        重置
      </Button>
    </div>
  );
}
